<template>
  <view class="page-default">
    <c-nav-bar title="监护人信息" type="white" bg-color="rgba(255,255,255,0.6)" />

    <view class="mx-2 rounded-lb-4 rounded-rb-4 pb-2">
      <view class="m-3 mt-6 flex items-center text-#1A2B5C font-bold">
        <view class="mr-2 h-4 w-5px rounded-2 bg-#02CAB1" />获得奖项1
      </view>
      <view class="m-3 mt-6 rounded-2 bg-white px-4 line-height-6">
        <up-form ref="dataForm" label-position="left" label-width="auto" :model="dataForm" :rules="rules">
          <up-form-item ref="item1" label="获奖项目类别" :border-bottom="true">
            <up-input border="none" placeholder="请输入姓名" />
          </up-form-item>
          <up-form-item ref="item1" label="奖项项目名称" prop="userInfo.name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                奖项项目名称
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input border="none" placeholder="请输入关系" />
          </up-form-item>
          <up-form-item ref="item1" label="学校标识码" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                获奖级别
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input border="none" placeholder="请输入身份证号码" />
          </up-form-item>
          <up-form-item ref="item1" label="入学时间" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                获奖等级
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input border="none" placeholder="请输入联系电话" />
          </up-form-item>
          <up-form-item ref="item1" required label="颁发单位" label-position="top" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                颁发单位
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-textarea placeholder="请输入颁发单位" border="none" class="textarea-no-px" />
          </up-form-item>
          <up-form-item ref="item1" label="毕业时间" prop="userInfo.name" :border-bottom="true">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                获奖日期
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-input border="none" placeholder="请输入联系地址" />
          </up-form-item>
          <up-form-item ref="item1" label="指导老师" prop="userInfo.name" :border-bottom="true">
            <up-input border="none" placeholder="请输入指导老师" />
          </up-form-item>
          <up-form-item ref="item1" label="毕业时间" prop="userInfo.name" label-position="top" :border-bottom="false">
            <template #label>
              <div class="flex items-center text-#6E7B8B">
                获奖证书
                <span class="text-red-500">*</span>
              </div>
            </template>
            <up-upload
              class="my-2"
              :file-list="fileList1"
              name="1"
              multiple
              :max-count="10"
            >
              <view class="upload-file w-full p-4">
                <view class="text-center">
                  <view class="flex items-center justify-center">
                    <up-icon name="camera-fill" size="40" color="#C5C9D1" />
                  </view>
                  <view class="w-full text-#C5C9D1">
                    上传证书
                  </view>
                </view>
              </view>
            </up-upload>
          </up-form-item>
        </up-form>
      </view>
    </view>
    <view class="mx-2 rounded-lb-4 rounded-rb-4 pb-4">
      <view class="mx-3 rounded-2 bg-white px-4 py-4 text-center text-xs text-#6E7B8B">
        <view class="mb-2 flex items-center justify-center">
          <up-icon name="plus-circle" size="26" color="#02CAB1" />
        </view>
        添加奖项
      </view>
    </view>
    <view class="mx-8 mb-2">
      <u-button size="default" shape="circle" class="gradient-button mb-8 mt-8" @click="goNextPage">
        <text class="text-base text-white">
          提交
        </text>
      </u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
// 响应式表单数据
const dataForm = ref({
  name: '',
  birthday: '',
});

// 校验规则
const rules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      trigger: ['blur', 'change'],
    },
  ],
};
</script>

<style lang="scss" scoped>
:deep(.u-line){
 border-bottom: 2px dashed #e0e7ec !important;
}

:deep(.uni-input-input){
  text-align: right;
}
:deep(.uni-input-placeholder ){
  text-align: right;
}
:deep(.uni-textarea-textarea){
  color: #000000;
}
:deep(.u-form-item__body__left__content__label){
  color: #6E7B8B;
}
</style>
